<template>
    <div class="box">
        <div class="fen_lei">

            <h1 class="txt">全部分类</h1>
        </div>
        <!-- 分类栏 -->
        <div class="fen_lei_lan">
            <ul>
                <li>
                    <a href="">
                        <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/7f6a7b20-7902-4b43-b9c5-f33151ef1334.jpg?quality=95&imageView" alt="">
                        <p class="txt">居家生活用品</p>
                    </a>
                </li>
                
                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/366989e4d730594e86fcd60b5ab19acc.png?quality=95&imageView" alt="">
                        <p class="txt">收纳</p>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/b42a85ef15f856081ea9f49e5f6893e2.png?quality=95&imageView" alt="">
                        <p class="txt">宠物食品</p>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/9544b81aaa14c26a8038c2365ff3c2bc.png?quality=95&imageView" alt="">
                        <p class="txt">艺术藏品</p>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/e766b09029ca00680d1e651b5cdc42bd.png?quality=95&imageView" alt="">
                        <p class="txt">宠物用品</p>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/3f34039fa8c26e18e2f4fc96ed8cb6de.png?quality=95&imageView" alt="">
                        <p class="txt">家庭医疗</p>
                    </a>
                </li>

                <li>
                    <a href="">
                        <img src="https://yanxuan.nosdn.127.net/2bfba997fd031317caecc4f0bad17569.png?quality=95&imageView" alt="">
                        <p class="txt">中医保健</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
//全部分类
.box {
    padding-top: 20px;
    .fen_lei {
        width: 1240px;
        height: 100px;
        background-color: white;
        display: flex;
        align-items: center; // 垂直居中
        .txt {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1; // 让文字占据剩余空间
            color: #666666;
            font-weight: 500;
            font-size: 28px;
        }
    }
    .fen_lei_lan {
        width: 1240px;
        height: 160px;
        background-color: white;
        ul {
            display: flex; // 让li水平排列
            justify-content: space-around; // 平均分配空间
            li {
                width: 168px;
                height: 160px;
                list-style: none;
                display: flex;
                flex-direction: column; // 垂直排列
                align-items: center; // 水平居中

                a {
                    text-decoration: none; // 去掉下划线
                    color: black; // 默认颜色
                    transition: color 0.3s; // 颜色变化动画

                    &:hover {
                        color: green; // 滑过变成绿色
                    }
                }

                img {
                    width: 100px;
                    height: 100px;
                }
                .txt {
                    display: flex;
                    text-align: center;
                    align-items: center;
                    justify-content: center; // 垂直居中
                    width: 100%;
                    height: 40px;
                }
            }
        }
    }
}
</style>



